<!--
 * @Descripttion:
 * @version:
 * @Author: tanghao1
 * @Date: 2021-02-28 11:40:12
 * @LastEditors: tanghao1
 * @LastEditTime: 2021-11-23 14:29:41
-->
<template>
  <div>
    <div v-show="!showScreen" class="nav-head">
      <el-row type="flex" class="row-bg" flex-direction="row-reverse">
        <el-col :span="4"><div><span>基础信息</span></div></el-col>
      </el-row>
      <el-form ref="form" :model="formData" :rules="formRules" size="mini" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="筛选名称" prop="name" :rules="name" min-width="200">
              <el-input v-model="formData.name" maxlength="5" show-word-limit size="mini" placeholder="请输入筛选名称" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="筛选类型" prop="type" :rules="type" min-width="200">
              <el-col :span="4">
                <el-select
                  v-model="formData.type"
                  size="mini"
                  placeholder="请选择"
                  :rules="gotoType"
                >
                  <el-option
                    v-for="item in attrValueList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-input
                  v-if="formData.type === &quot;attr&quot;"
                  v-model="formData.attrName"
                  suffix-icon="el-icon-search"
                  :span="4"
                  size="mini"
                  placeholder="请选择"
                  @click.native="searchAttr"
                />
              </el-col>
              <el-col :span="4">
                <el-select
                  v-if="formData.type === &quot;fixed&quot;"
                  v-model="formData.fixedItemCode"
                  size="mini"
                  placeholder="请选择"
                  :rules="gotoType"
                >
                  <el-option
                    v-for="item in fixedItemList"
                    :key="item.dictId"
                    :label="item.dictName"
                    :value="item.dictCode"
                  />
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否展示在外层" prop="isOuterShow" :rules="isOuterShow" min-width="300">
              <el-radio-group v-model="formData.isOuterShow">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否可多选" prop="isMultChoose" :rules="isMultChoose" min-width="200">
              <el-radio-group v-model="formData.isMultChoose">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否默认收起" prop="isDefaultFolded" :rules="isDefaultFolded" min-width="200">
              <el-radio-group v-model="formData.isDefaultFolded">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="是否有父级联动" prop="isSelectAll" :rules="isSelectAll" min-width="200">
              <el-col :span="4">
                <el-radio-group v-model="formData.isSelectAll">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-col>
              <el-col v-if="formData.isSelectAll === 1" :span="5">
                <el-input
                  v-model="formData.parentName"
                  suffix-icon="el-icon-search"
                  :span="4"
                  size="mini"
                  placeholder="请选择"
                  @click.native="searchData"
                />
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button size="mini" type="primary" @click="nextStep">下一步</el-button>
      </div>
    </div>
    <search-attr v-if="showAttr" ref="formAttr" :visible.sync="showAttr" :detail-dataselect="detailDataselect" :detail-attr="detailattr" @refreshAttr="refreshAttr" />
    <search-isSelectAll v-if="showIsSelectAll" ref="formIsSelectAll" :visible.sync="showIsSelectAll" :detail-dataselect="detailDataselect" :detail-filter="detailFilter" @refreshSelect="refreshSelect" />
    <Screen-form v-if="showScreen" ref="formScreen" :visible.sync="showScreen" :detail-datason="detailDatason" :other-filter="otherFilter" @refreshTable="refreshTable" @getChildData="getChildData" />
  </div>
</template>

<script>
import ScreenForm from './ScreenForm'
import SearchAttr from './SearchAttr'
import SearchIsSelectAll from './SearchIsSelectAll'
import { getDictBySelect } from '@/api/dataDict'
import { getToken } from '@/utils/auth'
import { saveModelData, getByAtlasAttributeId } from '@/api/shopauxPlat/screenTemplate'
export default {
  name: 'AddSelect',
  components: { ScreenForm, SearchIsSelectAll, SearchAttr },
  props: {
    detailData: {
      type: [String, Object],
      default: ''
    },
    addData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      showEdit: false,
      showScreen: false,
      showIsSelectAll: false,
      showAttr: false,
      imgUrl: '',
      uploadUrl: `${process.env.VUE_APP_BASE_API}/api/v1/file/upload`,
      headers: {
        'X-Token': this.$store.getters.token ? getToken() : '',
        'Authorization': this.$store.getters.token ? 'Bearer ' + getToken() : ''
      },
      submiting: false,
      picFile: [],
      otherFilter: [],
      detailDatason: [],
      detailDataselect: [],
      detailFilter: [],
      fixedItemList: [],
      detailattr: [],
      attrValueList: [{
        id: 1,
        name: '属性',
        code: 'attr'
      }, {
        id: 2,
        name: '固定值',
        code: 'fixed'
      }],
      pricingTypeCodeList: [], // 因子类型
      formData: {
        name: '',
        type: '',
        isOuterShow: 0,
        isMultChoose: 1,
        isDefaultFolded:0,
        isSelectAll: 0,
        parentId: '',
        state: '1'
      },
      tableData: [],
      formRules: {
        name: [{
          required: true,
          message: '请输入筛选名称',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请选择筛选类型',
          trigger: 'blur'
        }],
        state: [{
          required: true,
          message: '请选择是否显示',
          trigger: 'blur'
        }],
        isOuterShow: [{
          required: true,
          message: '请选择是否展示在外层',
          trigger: 'blur'
        }],
        isMultChoose: [{
          required: true,
          message: '请选择是否可多选',
          trigger: 'blur'
        }],
        isDefaultFolded:[{
          required: true,
          message: '请选择是否默认收起',
          trigger: 'blur'
        }],
        isSelectAll: [{
          required: true,
          message: '请选择是否有父级联动',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {},
  created() {
    const data = this.detailData
    if (data) {
      this.formData = this.detailData
    }
    // 初始化数据字典数据
    this.initAuditResult()
  },
  methods: {
    refreshTable() {
      this.$emit('refreshTable', true)
    },
    add() {
      this.getOtherFilter(this.tableData)
      this.showScreen = true
    },
    // 下一步
    nextStep() {
      this.detailDatason = this.formData
      if (this.formData.isSelectAll === 0) {
        this.formData.parentId = ''
      }
      // 校验必填项
      if (!this.formData.name) {
        this.$message.warning('筛选名称必填!')
        return
      }
      if (!this.formData.type) {
        this.$message.warning('筛选类型必选!')
        return
      }
      if (this.formData.type === 'attr' && !this.formData.attrName) {
        this.$message.warning('请选择属性值!')
        return
      }
      if (this.formData.type === 'fixed' && !this.formData.fixedItemCode) {
        this.$message.warning('请选择固定值!')
        return
      }

      if (this.formData.id) {
        saveModelData(this.formData).then(res => {
          if (res.success === 1) {
            this.$message.success('保存成功')
            this.showScreen = true
          }
        })
      } else {
        const data = { ...this.formData }
        data.filterTemplateId = this.addData.id
        saveModelData(data).then(res => {
          if (res.success === 1) {
            this.$message.success('保存成功')
            this.detailDatason = res.data
            this.showScreen = true
          }
        })
      }
      // this.showScreen = true
    },
    getChildData(data) {
      this.tableData = this.tableData.concat(data)
      this.getOtherFilter(this.tableData)
    },
    // 删除
    handleDel(row, index) {
      this.tableData.splice(index, 1)
    },
    // 编辑
    addnavThree(data) {
      getByAtlasAttributeId(data.id).then(res => {
        if (res.success === 1) {
          this.attrValueList = res.data
        }
      })
    },
    refreshSelect(data) {
      console.log(data)
      this.formData.parentId = data.id
      this.formData.parentName = data.name
      this.showIsSelectAll = false
    },
    refreshAttr(data) {
      this.formData.attrName = data.name
      this.formData.attrId = data.id
      this.showAttr = false
    },
    // 获取因子组合编码集合，作为弹框过滤条件
    getOtherFilter(data) {
      if (data && data.length > 0) {
        const attCode = data.map(item => item.attCode).join()
        this.otherFilter = [{ id: 'attCode', property: 'attCode', value: `[${attCode}]`, operator: 'not in' }]
      } else {
        this.otherFilter = []
      }
    },
    // 是否有父级联动,查询数据
    searchData() {
      this.detailDataselect = this.formData
      this.detailFilter = this.addData
      this.showIsSelectAll = true
    },
    // 筛选类型为属性是
    searchAttr() {
      console.log(111)
      this.detailattr = this.formData
      this.detailDataselect = this.formData
      this.showAttr = true
    },
    // 数据字典获取 筛选数据来源
    initAuditResult() {
      getDictBySelect({
        dictTypeCode: 'FILTER_TEMPLATE_CONDITION_FIXED_ITEM',
        appCode: 'sad',
        domainCode: 'marketing'
      }).then(res => {
        this.fixedItemList = res
      })
    }
  }
}
</script>
<style lang='scss' scoped>
 .nav-head{
   margin: 20px 0 20px 0;
 }
  .basicpic{
   width: 100px;
   height: 100px;
   margin: 5px;
 }
 .avatar-uploader .el-upload {
    border: 1px dashed #0c0202;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    border: 1px dashed #0c0202;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
   .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .row-bg{
    margin: 20px ;
  }
</style>

